<div class="alert-container">
    {% if request.args.get('message') %}
    <div class="alert alert-success">
        <i class="bi bi-check-circle"></i>
        <span>{{ request.args.get('message').replace('\n', '<br>')|safe }}</span>
        <button class="close-btn" onclick="this.parentElement.remove()">&times;</button>
    </div>
    {% endif %}

    {% if request.args.get('error') %}
    <div class="alert alert-danger">
        <i class="bi bi-exclamation-circle"></i>
        <span>{{ request.args.get('error') }}</span>
        <button class="close-btn" onclick="this.parentElement.remove()">&times;</button>
    </div>
    {% endif %}
</div>

<style>
    .alert-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1050;
        max-width: 350px;
    }
    .alert {
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 10px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        animation: slideIn 0.3s ease-out;
    }
    .alert-success {
        background-color: #d1e7dd;
        color: #0f5132;
        border: 1px solid #badbcc;
    }
    .alert-danger {
        background-color: #f8d7da;
        color: #842029;
        border: 1px solid #f5c2c7;
    }
    .alert i {
        margin-right: 10px;
        font-size: 1.2em;
    }
    .alert .close-btn {
        margin-left: auto;
        background: none;
        border: none;
        font-size: 1.2em;
        cursor: pointer;
        color: inherit;
    }
    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
</style>